<template>
  <div class="file-upload-example">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>文件上传示例</span>
        </div>
      </template>
      
      <div class="upload-section">
        <h3>头像上传</h3>
        <FileUpload
          v-model="avatarFiles"
          upload-type="AVATAR"
          :max-size="2"
          :allowed-types="['jpg', 'jpeg', 'png', 'gif']"
          :limit="1"
          tip="请选择头像文件，支持jpg、jpeg、png、gif格式，最大2MB"
          @on-success="handleAvatarSuccess"
          @on-error="handleUploadError"
        />
      </div>

      <div class="upload-section">
        <h3>文档上传</h3>
        <FileUpload
          v-model="documentFiles"
          upload-type="DOCUMENT"
          :max-size="10"
          :allowed-types="['pdf', 'doc', 'docx', 'xls', 'xlsx']"
          :limit="5"
          tip="请选择文档文件，支持pdf、doc、docx、xls、xlsx格式，最大10MB"
          @on-success="handleDocumentSuccess"
          @on-error="handleUploadError"
        />
      </div>

      <div class="upload-section">
        <h3>图片上传</h3>
        <FileUpload
          v-model="imageFiles"
          upload-type="IMAGE"
          :max-size="5"
          :allowed-types="['jpg', 'jpeg', 'png', 'gif', 'bmp']"
          :limit="10"
          tip="请选择图片文件，支持jpg、jpeg、png、gif、bmp格式，最大5MB"
          @on-success="handleImageSuccess"
          @on-error="handleUploadError"
        />
      </div>

      <div class="file-list-section">
        <h3>已上传文件列表</h3>
        <el-table :data="allFiles" style="width: 100%">
          <el-table-column prop="fileName" label="文件名" />
          <el-table-column prop="fileSizeFormatted" label="文件大小" width="120" />
          <el-table-column prop="uploadType" label="上传类型" width="100" />
          <el-table-column prop="createTime" label="上传时间" width="180" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="previewFile(scope.row)">预览</el-button>
              <el-button size="small" type="danger" @click="deleteFile(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import FileUpload from '@/components/FileUpload.vue'
import { getUserFiles, deleteFile } from '@/api/user'

const avatarFiles = ref([])
const documentFiles = ref([])
const imageFiles = ref([])
const allFiles = ref([])

// 合并所有文件列表
const updateAllFiles = () => {
  allFiles.value = [
    ...avatarFiles.value,
    ...documentFiles.value,
    ...imageFiles.value
  ]
}

// 监听文件列表变化
const handleAvatarSuccess = (response: any, file: any, fileList: any[]) => {
  ElMessage.success('头像上传成功')
  updateAllFiles()
}

const handleDocumentSuccess = (response: any, file: any, fileList: any[]) => {
  ElMessage.success('文档上传成功')
  updateAllFiles()
}

const handleImageSuccess = (response: any, file: any, fileList: any[]) => {
  ElMessage.success('图片上传成功')
  updateAllFiles()
}

const handleUploadError = (error: Error, file: any, fileList: any[]) => {
  ElMessage.error('文件上传失败：' + error.message)
}

// 预览文件
const previewFile = (file: any) => {
  if (file.url) {
    window.open(file.url)
  } else {
    ElMessage.warning('文件链接不可用')
  }
}

// 删除文件
const deleteFileHandler = async (file: any) => {
  try {
    if (file.id) {
      await deleteFile(file.id)
      ElMessage.success('文件删除成功')
      // 从对应列表中移除
      avatarFiles.value = avatarFiles.value.filter(f => f.id !== file.id)
      documentFiles.value = documentFiles.value.filter(f => f.id !== file.id)
      imageFiles.value = imageFiles.value.filter(f => f.id !== file.id)
      updateAllFiles()
    } else {
      ElMessage.warning('文件ID不存在')
    }
  } catch (error) {
    ElMessage.error('文件删除失败')
  }
}

// 加载用户文件列表
const loadUserFiles = async () => {
  try {
    const response = await getUserFiles()
    if (response.data) {
      // 根据上传类型分类文件
      avatarFiles.value = response.data.filter((file: any) => file.uploadType === 'AVATAR')
      documentFiles.value = response.data.filter((file: any) => file.uploadType === 'DOCUMENT')
      imageFiles.value = response.data.filter((file: any) => file.uploadType === 'IMAGE')
      updateAllFiles()
    }
  } catch (error) {
    ElMessage.error('加载文件列表失败')
  }
}

onMounted(() => {
  loadUserFiles()
})
</script>

<style lang="scss" scoped>
.file-upload-example {
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .upload-section {
    margin-bottom: 30px;

    h3 {
      margin-bottom: 15px;
      color: #303133;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .file-list-section {
    margin-top: 30px;

    h3 {
      margin-bottom: 15px;
      color: #303133;
      font-size: 16px;
      font-weight: 600;
    }
  }
}
</style> 